<template>
  <div class="login">
    <h3>登录</h3>
    <el-divider></el-divider>
    <el-input v-model="username" placeholder="请输入" class="mb">
      <template slot="prepend">用户</template>
    </el-input>
    <el-input type="password" v-model="password" placeholder="请输入" class="mb">
      <template slot="prepend">密码</template>
    </el-input>
    <div class="error">{{message}}</div>
    <el-button type="primary" @click="login">登录</el-button>
    <el-button @click="$router.push('/reg')">注册</el-button>
  </div> 
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Login extends Vue {
  username:string = '';
  password:string = '';
  message:string = '';

  login(){
    this.$axios({
      url:'/api/login',
      method:'post',
      data:{
        username:this.username,
        password:this.password
      }
    }).then(
      res=>{
        if(res.data.err==0){
          //同步vuex && cookie
          this.$cookies.set('user',res.data)
          this.$store.commit('user/M_UPDATE_USER',res.data)

          if(!this.$route.query.path || /login|reg/.test(this.$route.query.path as string)){
            this.$router.replace('/user')
          }else{
            this.$router.replace(<string>this.$route.query.path)
          }
        }else{
          this.message=res.data.msg
        }
        
      }
    )
  }
}

</script>

<style scoped>
.login{
  width:35%;
  height:auto;
  position: absolute;
  left:50%;top:50%;
  margin-left:-17%;
  transform: translateY(-50%)
}
.mb{
  margin-bottom: 20px;
}
.error{
  color:red
}
</style>
